<template>
  <div class="app-container invoices-container">
    <el-tabs v-model="active" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane label="订单收款单" :name="1" />
      <el-tab-pane label="采购付款单" :name="2" />
      <el-tab-pane label="预收款单" :name="3" />
      <el-tab-pane label="其他收款单" :name="4" />
      <el-tab-pane label="退款付款单" :name="8" />
      <el-tab-pane label="预付款单" :name="9" />
      <el-tab-pane label="资金调拨单" :name="10" />
      <el-tab-pane label="请款付款单" :name="14" />
    </el-tabs>
    <component :is="components[active]" @toPayment="toPayment" @mergeId="mergeId"></component>
  </div>
</template>

<script setup>
import { ref } from "vue";
import PreCollection from "./components/PreCollection.vue";
import Order from "./components/Order.vue";
import Procurement from "./components/Procurement/index.vue";
import Other from "./components/Other.vue";
import Refund from "./components/Refund.vue";
import Prepay from "./components/Prepay.vue";
import Allocate from "./components/Allocate.vue";
import RequestPayment from "./components/RequestPayment.vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const components = {
  1: Order,
  2: Procurement,
  3: PreCollection,
  4: Other,
  8: Refund,
  9: Prepay,
  10: Allocate,
  14: RequestPayment
};
// const active = ref(1);
const active = ref(Number(route.query.type) || 1);
const handleClick = () => {
  router.replace({
    path: "/finance/invoices",
    query: {}
  });
};
/**
 * 新开页面并跳转收支流水
 */
const toPayment = query => {
  const routeInfo = router.resolve({
    path: "/finance/payments",
    query
  });
  const url = routeInfo.href;
  window.open(url, "_blank");
};
/**
 * 合并名称和id
 */
const mergeId = list => {
  return list.map(item => ({
    ...item,
    name: item.name + "(" + item.partnerId + ")"
  }));
};
</script>

<style lang="scss" scoped>
.invoices-container {
  ::v-deep(.el-tabs__nav-wrap::after) {
    height: 1px;
  }

  ::v-deep(.el-tabs__item.is-active) {
    color: $topic;
  }

  ::v-deep(.el-tabs__active-bar) {
    background: $topic;
  }

  ::v-deep(.el-tabs__item:hover) {
    color: $topic;
  }
}
</style>
